<template>
	<view class="duo" :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar :title="pageTitle" :autoBack="true" />
		<view class="avatar flex-r a-c j-c mt-3">
			<view class="flex-c a-c j-c">
				<up-avatar size="60" text="北" fontSize="24" randomBgColor></up-avatar>
				Fewoj
			</view>
			<text class="ml-1 mr-1">vs</text>
			<view class="flex-c a-c j-c">
				<up-avatar size="60" text="南" fontSize="24" randomBgColor></up-avatar>
				Gkingh
			</view>
		</view>
		<view class="flex-r s-b m-1 mt-3">
			<view class="ai-dialogue flex-r s-b a-c p-1"
				@click="handleTo('/pages/home/components/personalMap/AIdialogue')">
				<view class="flex-r a-c">
					<text class="iconfont icon-zhinengAi- mr-1" />
					AI解读对话
				</view>
				<text class="iconfont icon-youjiantou" />
			</view>
			<view class="ai-dialogue ai-dialogue2 flex-r s-b a-c p-1"
				@click="handleTo('/pages/home/components/personalMap/duoAutonomous?pageTitle=xxx-tz')">
				<view class="flex-r a-c">
					<text class="iconfont-color icon-zizhujiedu mr-1" />
					自主解读
				</view>
				<text class="iconfont icon-youjiantou" />
			</view>
		</view>
		<view class="items">
			<view class="title flex-r a-c">
				<view class="ml-1 mr-1"> 1 </view>
				关系总结与合作建议
			</view>
			<view class="text-box mt-1">
				彼此理解对方的特质，结合各自优势，避免踩对方的雷区，才能在事业、财富、家庭等方面实现共赢！
			</view>
			<view class="text-box text-box2 mt-1">
				<view>事业上</view>
				<text>是绝佳拍档，XIAO西负责开创，小明负责执行。</text>
				<view>财富管理</view>
				<text>需要平衡，一个冒险一个稳健，互相补充。</text>
				<view>家庭关系</view>
				<text>需给予彼此独立空间，避免过度干涉。</text>
				<view>健康方面</view>
			</view>
			<!-- 解锁前的遮罩 -->
			<white-mask height="50vh" v-if="true" />
		</view>
		<view class="unlock-btn">
			<button class="button-active" @click="handleTo('/components/paymentPage')">立即解锁报告</button>
		</view>
	</view>
</template>

<script setup>
	import whiteMask from "@/components/whiteMask.vue"
	const props = defineProps({
		pageTitle: {
			type: String,
			default: 'Fewoj - Gkingh'
		}
	})
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const handleTo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.avatar {

		>text {
			font-size: 50rpx;
			color: #FF9191;
		}

		>view {
			font-size: 24rpx;
		}
	}

	.ai-dialogue {
		width: 344rpx;
		height: 100rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 12rpx;
		background-color: #8681FF;
		box-sizing: border-box;

		.iconfont,.iconfont-color {
			margin-left: 10rpx;
			font-size: 28rpx;
		}
	}

	.ai-dialogue2 {
		background-color: #FF9281;
	}

	.items {
		padding: 20rpx 40rpx;
		position: relative;

		.title {
			width: 100%;
			height: 72rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			background: linear-gradient(270deg, #FFDFC6 0%, #EC672D 100%);
			border-radius: 36rpx;

			>view {
				width: 46rpx;
				height: 46rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				background: linear-gradient(180deg, #FBDEB8 0%, #F77F66 100%);
				border-radius: 36rpx;
				text-align: center;
			}
		}

		.text-box {
			line-height: 56rpx;
			font-size: 30rpx;
			color: #4D4D4D;
			background: linear-gradient(90deg, #FFE6DD 0%, #FEF5EF 100%);
			border-radius: 20rpx;
			padding: 40rpx 30rpx;

			view {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				margin-top: 20rpx;
			}

			text {
				font-size: 28rpx;
				color: #4D4D4D;
			}
		}

		.text-box2 {
			padding: 20rpx 30rpx;
		}
	}

	.unlock-btn {
		position: sticky;
		z-index: 1;
		bottom: 0;
		padding: 40rpx;
	}
</style>